<template>
  <div :class="{'is-mobile': showMobilePage}" class="calendar-item-wrap">
    <div v-if="filterItems.length > 0" class="data-item-box" @click="checkList">
      <div :style="{marginBottom:isCurrentDay(time.date)?'0px':'2px'}" class="day"><div :class="{'today': isCurrentDay(time.date)}">{{ time.day }}</div></div>
      <div class="subscribe-box">
        <div v-for="(item) in filterItems" :key="item.id">
          <div :class="{'success-border':item.type === 1,'wait-border':item.type=== 2}" class="subscribe-item">
            <el-tooltip v-if="!showMobilePage" class="item" effect="dark" placement="top-start">
              <div slot="content" style="max-width: 300px;">
                <div
                  style="color:rgb(167, 192, 255);">[{{ !!item.type?showType(item.type):'--' }}]{{ !!item.name?item.name:'--' }}</div>
                <div>{{ item.resourceName + appendResourceId(item) }}</div>
                <div>{{ !!item.platformTypeName?item.platformTypeName:'--' }}|{{ !!item.orderForm?item.orderForm:'--' }}</div>
                <div>{{ !!item.brandName?item.brandName:'--' }}|{{ !!item.demandCategoryName?item.demandCategoryName:'--' }}</div>
                <div v-if="!!item.exclusiveStartTime">排他时间：{{ timeFomat(item.exclusiveStartTime) }}-{{ timeFomat(item.exclusiveEndTime) }}</div>
                <div>预约人：{{ !!item.subscribeUser?item.subscribeUser:'--' }}</div>
              </div>
              <div :class="{'exclusive':!!item.exclusiveStartTime}" class="subsribe-name">{{ item.name }}</div>
            </el-tooltip>
            <el-tooltip :content="statusContnet(item.status)" class="item" effect="dark" placement="top-start">
              <div v-if="item.status === 1" class="tick"><i class="el-icon-circle-check" /></div>
              <div v-if="item.status === 0" class="tick wait"><i class="el-icon-time" /></div>
              <div v-if="item.status === 2" class="tick cancle"><i class="el-icon-circle-close" /></div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="only-date">{{ time.day }}</div>
  </div>
</template>
<script>
// import { dynamicColor } from '@/utils/ventureColorCfg';
import * as utils from '../SubcribeCalendar/calendar.js';
import ResourceFlag from './resourceFlag';
import { standardFormat } from '@/filters/date';
import { mapGetters, mapState } from 'vuex';
export default {
  name: 'CalendarItem',
  filters: { standardFormat },
  components: { ResourceFlag },
  props: {
    time: {
      type: Object,
      default: () => null
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    filterItems() {
      const maxNum = this.showMobilePage ? 2 : 4;
      if (this.items.length > maxNum) {
        const arr = this.items.slice(0, maxNum);
        return arr;
      } else {
        return this.items;
      }
    },
    ...mapGetters([
      'resourceIsShowPlatform',
      'resourceIsShowOrgan',
      'resourceShowId'
    ])
  },
  methods: {
    // 预约人
    switchSubcribeUser(users) {
      if (users && users.length > 0) {
        const names = users.map(item => item.userName);
        return names.join('/');
      } else {
        return '--';
      }
    },
    showType(type) {
      return type === 1 ? '广告' : '电商';
    },
    timeFomat(time = '') {
      return time.substr(0, 10).replace(/-/g, '/');
    },
    // 是否是今天
    isCurrentDay(date) {
      const {
        year: currentYear,
        month: currentMonth,
        day: currentDay
      } = utils.getNewDate(new Date());
      const { year, month, day } = utils.getNewDate(date);
      return currentYear === year && currentMonth === month && currentDay === day;
    },
    subcribeAdditionInfo(data) {
      let str = '';
      if (data.resourceName) {
        str += `[${data.resourceName}]`;
      }
      if (data.platformTypeName) {
        str += `[${data.platformTypeName}]`;
      }
      if (data.accountNameOrganization) {
        str += `[${data.accountNameOrganization}]`;
      }
      return str;
    },
    checkList() {
      const time = this.time.date.getTime();
      this.$emit('checkList', time);
    },
    statusContnet(status) {
      switch (status) {
        case 0:
          return '已预约待确认';
        case 1:
          return '预约已确认';
        case 2:
          return '预约已取消';
        default:
          break;
      }
    },
    appendResourceId(item) {
      if (item.resourceCode && this.resourceShowId) {
        return `(${item.resourceCode})`;
      }
      return '';
    },
    appendTipResourceInfo(item) {
      const p = (item.platformTypeName && this.resourceIsShowPlatform) ? `${item.platformTypeName}` : '';
      const o = (item.accountNameOrganization && this.resourceIsShowOrgan) ? `${item.accountNameOrganization}` : '';
      const b = item.accountBelongName ? `${item.accountBelongName}` : '';
      return p + ((p && o || p && b) ? ' | ' : '') + o + (b ? ' | ' : '') + b;
    }
  }
};
</script>
<style lang="scss" scoped>
.calendar-item-wrap {
  cursor: pointer;
  .only-date {
      height: 43px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #333333;
  }
  .data-item-box {
    position: relative;
    overflow: hidden;
    border-radius:8px;
    .day {
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #333333;
    }
    .today{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 28px;
      height: 28px;
      background: #406EFF;
      border: 2px solid #B5C7FF;
      border-radius: 50%;
      color: #ffffff;
      margin: 0;
    }
    .subscribe-box {
      .subscribe-item {
        display: flex;
        align-items: center;
        font-size: 12 px;
        color: #333;
        margin-bottom: 4px;
        padding: 0 2px;
        border-radius: 4px;
        &:hover {
          background-color: #eff3fb;
        }
      }
      .success-border{
        border: 1px dashed #406EFF;
      }
      .cancle-border{
        border: 1px dashed #DDDDDD;
      }
      .wait-border{
        border: 1px dashed #FD8546;
      }
      .subsribe-name {
        // width: 50%;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
      }
      .exclusive{
        color: #FF4E5F;
      }
      .tick {
        font-size: 14px;
        color: #406EFF;
        /*margin-right: 5px;*/
      }
      .wait {
        color: #F67943;
      }
      .cancle {
        color: #999;
      }
    }
  }
  &.is-mobile {
    .success-border {
      border: none !important;
      background-color: #EFF3FB;
      .el-icon-time {
        color: #406EFF !important;
      }
    }
    .wait-border {
      background-color: #FFF4EF;
      border: none !important;
      .el-icon-time {
        color: #FD8546 !important;
      }
    }
  }
}
</style>
